<template>
  <section class="filter">
    <search
      :placeholderId="placeholderId"
      @on-search="onKeywordSearch"
      calss="search"
      :width="width"
    />
    <div ref="filterContentRef">
      <el-popover placement="bottom" :width="400" trigger="click" :visible="visible">
        <template #reference>
          <el-button
            v-show="!hideAdvance"
            class="advanced-btn"
            size="small"
            type="primary"
            @click.stop="visible = true"
          >
            {{ $t('lang.operate.advance') }}
            <i :class="visible ? 'el-icon-caret-top' : 'el-icon-caret-bottom'" />
          </el-button>
        </template>
        <div>
          <cmp-form
            ref="formRef"
            :form-items="formItems"
            v-model="form"
            inline
            :options="options"
            :label-width="labelWidth"
          />
          <div class="btn-group">
            <el-button type="primary" @click="onSearch">{{ $t('lang.operate.confirm') }}</el-button>
            <el-button @click="onReset">{{ $t('lang.operate.reset') }}</el-button>
          </div>
        </div>
      </el-popover>
    </div>
    <AscendingOrder
      v-if="ascendingDescending?.length > 0"
      :ascendingDescending="ascendingDescending"
      @advancedChange="advancedChange"
    ></AscendingOrder>
    <!-- 操作按钮 -->
    <div class="btns">
      <slot />
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
import { FormItems, Options } from '@/components/Form/types'
import CmpForm from '@/components/Form/index.vue'
import { ObjectType } from 'typings/interfaces'
import Search from './Search.vue'
import { invoke, mapValues, isEmpty } from 'lodash'
import AscendingOrder from '@/components/AdvancedSearch/components/ascendingOrder.vue'
import { stakeToValue } from '@/utils/formatting'

export default defineComponent({
  emits: ['on-search'],
  name: 'Filter',
  props: {
    formItems: {
      type: Array as PropType<FormItems>,
      required: true,
    },
    options: {
      type: Object as PropType<Options>,
      required: true,
    },
    ascendingDescending: {
      type: Array,
      default: () => [],
    },
    labelWidth: {
      type: String,
      default: '50px',
    },
    placeholderId: {
      type: String as PropType<string>,
      default: 'lang.placeholder.input',
    },
    extraParams: {
      type: Object as PropType<ObjectType>,
      default: () => ({}),
    },
    width: {
      type: String,
      default: '200',
    },
    /**
     * 隐藏高级按钮
     */
    hideAdvance: {
      type: Boolean,
      default: false,
    },
    /**
     * 显示排序方式按钮
     */
    showAscendingOrder: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    CmpForm,
    Search,
    AscendingOrder,
  },
  setup(props, { emit }) {
    const visible = ref(false)
    const formRef = ref(null)
    const advancedOrder = ref({})
    const keyword = ref('')
    const form = ref({})
    const handleParams = (params: ObjectType) =>
      mapValues(params, (value, key) => {
        if (value && !isEmpty(value)) {
          if (key == 'endStake' || key == 'startStake' || key == 'centerStake') {
            return stakeToValue(value)
          }
          return value
        }
        return undefined
      })

    const onKeywordSearch = (value: string) => {
      keyword.value = value
      onSearch()
    }
    const advancedChange = (item: any) => {
      advancedOrder.value = item
      onSearch()
    }
    const onSearch = () => {
      visible.value = false
      emit(
        'on-search',
        1,
        { keyword: keyword.value, ...handleParams(form.value) },
        advancedOrder.value
      )
    }
    const onReset = () => invoke(formRef.value, 'nodeRef.resetFields')

    const filterContentRef = ref()
    window.addEventListener('click', (e: any): void => {
      if (!visible.value) return
      if (filterContentRef.value && !filterContentRef.value.contains(e.target)) {
        visible.value = false
      }
    })
    return {
      visible,
      form,
      formRef,
      onSearch,
      advancedChange,
      onReset,
      onKeywordSearch,
      filterContentRef,
    }
  },
})
</script>
<style lang="scss" scoped>
.filter {
  display: flex;
  margin-bottom: 20px;

  & > div {
    margin-right: 10px;
  }
  .btns {
    display: flex;
    margin-left: auto;
  }
}
.advanced-btn {
  width: 74px;
}
.btn-group {
  display: flex;
  justify-content: flex-end;
}
</style>
